@charset "utf-8";
/* 外部css文件，第一行：控制乱码 */
/*第二行:设置通用样式*/
*{
	/* 盒模型：内外边距+边框+内容组成
	 但是，有些元素默认自带外边距:boby,p,ul/ol
	 */
	margin:0;
	padding:0;
	/* 文字：家族,尺寸 */
	font-family: "华文彩云";
	font-size: 80px;
}
	


body{
	background-color: #aaffff;
	/* 背景属性【复合属性】：可以省略属性值的属性
	 属性值：color,image,origin与size,repeat
	 常用背景属性：url() size  repeat;
	 子属性与主属性使用一致！
	 子属性：background-color背景颜色
	        background-image背景图片  属性值：url(图片路径)，url(",")
			background-size背景尺寸：宽 高
			background-repeat背景平铺  no-repeat
			注意：设置背景图之后立即加背景图宽高！
	 背景属性与图片元素区别？
	 背景属性，频繁移动的元素
	 图片元素，出现在固定页面
	  */
	background: #f00;
	background-image: url(../img/bg.jpg);
	background:url(../img/bg.jpg) no-repeat;
	background-repeat: no-repeat;
	background-size: 100% 818px;
	
}
/* 熊 */
.bear{
	width:200px;
	height:300px;
	/* 验证是否选中 */
	bo rder:1px solid red;
	background:url(../img/bear_1.png);
	background-size: 100% 100%;
	position:relative;
	left:10px;
	top:67.5px;
	/* 熊div元素添加动画：启动关键帧 */
	animation: bear 10s linear infinite;
}


/* 1个动画：创建一个关键帧 特点：具体元素上启动关键帧存在继承性
                              宽高，背景，定位属性被继承
 */
@keyframes bear{
	0%{
		/* 初始化 */
		left:10px;
		top:67.5px;
	}
	10%{
		left:946px;
		top:9.5px;
		background:url(../img/bear_1.png);
		background-size: 100% 100%;
	}
	20%{
		top:210.5px;
		left:755px;
		background:url(../img/bear_2.png);
		background-size: 100% 100%;
	}
	30%{
		left:368px;
		top:242.5px;
		background:url(../img/bear_3.png);
		background-size: 100% 100%;
	}
	40%{
		left:10px;
		top:67.5px;
		background:url(../img/bear_4.png);
		background-size: 100% 100%;
	}
	50%{
		left:946px;
		top:9.5px;
		background:url(../img/bear_5.png);
		background-size: 100% 100%;
	}
	60%{
		left:210.5px;
		top:500px;
		background:url(../img/bear_6.png);
		background-size: 100% 100%;
	}
	70%{
		left:368px;
		top:100px;
		background:url(../img/bear_7.png);
		background-size: 100% 100%;
	}
	80%{left: 10px;
        top:30px;
		background:url(../img/bear_8.png);
		background-size: 100% 100%;
	}
	90%{
		left:946px;
		top:9.5px;
		background:url(../img/bear_9.png);
		background-size: 100% 100%;
	}
	100%{
		left:210.5px;
		top:7.5px;
		background:url(../img/bear_10.png);
		background-size: 100% 100%;
	}
}